<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>canvas</title>
    <style>
        #myCanvas {
            border: 1px solid red;
        }
    </style>
</head>
<body>
<canvas id="myCanvas">
    您的浏览器不支持Canvas，请升级浏览器
</canvas>
<script>
    var canvas = document.getElementById('myCanvas');
    var ctx = canvas.getContext('2d');
    // ctx.canvas.width = 600;
    // ctx.canvas.height = 400;
    // ctx.fillStyle = "#000000";
    // ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    var img = new Image();
    img.src = "logo.png";
    img.onload = function () {
        //repeat-x  repeat-y  no-repeat创建图形画刷
        var pattern = ctx.createPattern(img, "repeat");
        ctx.fillStyle = pattern;
        ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    }
</script>
</body>
</html>